<template>
  <div id="browseRecord">
    <!-- active-color="#d4d4d4" inactive-color="#d4d4d4" -->
    <van-steps :active="active" direction="vertical" class="record-list" v-if="times.length > 0">
      <van-step class="record-item" v-for="(item, index) in times" :key="index">
        <div class="time-list">
          <div style="display: flex; align-items: center;">
            <div class="time" style="flex: 1; padding-left: 1.3rem;">{{ item.time }}</div>
            <div v-if="!item.isShow" @click="showHistorys(index)">
              <span>点击查看记录 </span>
              <van-icon name="arrow-down"></van-icon>
            </div>
            <div v-else @click="closeHistorys(index)">
              <span>收起 </span>
              <van-icon name="arrow-up"></van-icon>
            </div>
          </div>

          <div class="item" v-if="item.isShow">
            <div class="browse-page" v-for="(history, index2) in item.list" :key="index2">
              <div class="header overflow">
                <div class="page-name overflow">{{ history.title }}</div>
                <div class="time">{{ history.created_at }}</div>
              </div>
              <div class="link overflow" v-if="!history.is_page_type">访问 {{ history.url }}</div>
              <div class="contenbox" v-else>
                <div class="cimg">
                  <img :src="history.thumb" alt="" />
                </div>
                <div class="cRight" @click="toUrl(history.url)" v-if="!fun.isUrl(history.url)">
                  <div class="ctitle">{{ history.title }}</div>
                  <div class="cprice">￥{{ history.price }}</div>
                </div>
                <div class="cRight" v-clipboard:copy="history.url" v-clipboard:success="onCopy" v-else>
                  <div class="ctitle">{{ history.title }}</div>
                  <div class="cprice">￥{{ history.price }}</div>
                </div>
              </div>
              <div class="bottom">
                <div class="type">
                  <span style="padding: 0.1rem 0.4rem;" v-if="history.port_type">{{ history.port_type }}</span>
                </div>
                <div class="copy" @click="toUrl(history.url)" v-if="!fun.isUrl(history.url)">查看链接</div>
                <div class="copy" v-else v-clipboard:copy="history.url" v-clipboard:success="onCopy" v-clipboard:error="onError">查看链接</div>
              </div>
            </div>
            <div class="load-more" v-if="item.list.length > 0 && !item.load.finished" @click="getHistory(index)">
              加载更多
              <van-icon name="arrow-down"></van-icon>
            </div>
          </div>
        </div>
        <template #active-icon>
          <img src="../../../assets/images/enterprise_wechat/point.png" alt="" style="width: 10px; height: 10px;" />
        </template>
        <template #inactive-icon>
          <img src="../../../assets/images/enterprise_wechat/point.png" alt="" style="width: 10px; height: 10px;" />
        </template>
      </van-step>
      <van-step class="record-item"></van-step>
    </van-steps>
    <van-empty v-else description="空空如也"></van-empty>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  props: ["keywork"],
  data() {
    return {
      active: 0,
      getHistoryUrl: "plugin.wechat-chat-sidebar.frontend.controller.customer.customer.get-history",
      getTimeUrl: "plugin.wechat-chat-sidebar.frontend.controller.customer.customer.history",
      getConfig: { client: "work", type: 17 }, //企业微信公共参数
      times: [],
      history: [],
      timeIndex: ""
      // page: 1,
      // loading: false,
      // finished: false
    };
  },

  mounted() {
    this.getTimeList();
  },
  methods: {
    toUrl(url) {
      if (!this.fun.isUrl(url)) {
        window.location.href = url;
      }
    },
    getTimeList() {
      let json = {};
      if (this.keywork == "customer") {
        this.getTimeUrl = "plugin.customer-center.frontend.controllers.customer.history";
        json.member_id = this.$route.params.id;
      } else {
        json = { ...this.getConfig };
      }
      $http.get(this.getTimeUrl, json, "loading").then(res => {
        if (res.result === 1) {
          if (res.data.time_data.length > 0) {
            res.data.time_data.forEach(item => {
              this.times.push({
                time: item,
                list: [],
                load: { page: 1, finished: false },
                isShow: false
              });
            });
          } else {
            // this.finished = true;
          }
        } else {
          this.$dialog.alert({ message: res.msg });
        }
      });
    },
    showHistorys(index) {
      this.timeIndex = index;
      let historyData = this.times[index];
      historyData.isShow = !historyData.isShow;
      if (!historyData.isShow) {
        return;
      }
      this.getHistory();
    },
    closeHistorys(index) {
      this.timeIndex = index;
      let historyData = this.times[index];
      historyData.isShow = !historyData.isShow;
      historyData.load.finished = false;
    },
    getHistory(index) {
      let historyData;
      if (this.times[index]) {
        if (this.times[index].isShow) {
          historyData = this.times[index];
        } else {
          historyData = this.times[this.timeIndex];
        }
      } else {
        historyData = this.times[this.timeIndex];
      }
      if (historyData.load.finished) {
        this.$dialog.alert({ message: "没用更多了" });
        return;
      }
      let json = {
        page: historyData.load.page,
        get_time: historyData.time
      };
      let obj = {};
      if (this.keywork == "customer") {
        this.getHistoryUrl = "plugin.customer-center.frontend.controllers.customer.get-history";
        json.member_id = this.$route.params.id;
        obj = { ...json };
      } else {
      //  json = { ...this.getConfig };
        obj = {
          ...json,
          ...this.getConfig
        };
      }
      console.log(obj,'obj====')
      $http.get(this.getHistoryUrl, obj, "loading").then(res => {
        if (res.result === 1) {
          if (historyData.load.page >= res.data.last_page || res.data.data.length < res.data.per_page) {
            historyData.load.finished = true;
          }
          historyData.list = historyData.load.page > 1 ? historyData.list.concat(res.data.data) : res.data.data;
          historyData.load.page = ++historyData.load.page;
        } else {
          this.$dialog.alert({ message: res.msg != "" ? res.msg : "暂无数据" });
        }
      });
    },
    //复制
    onCopy: function (e) {
      Toast({
        message: "复制成功",
        duration: 1000
      });
    },
    onError: function (e) {
      Toast({
        message: "复制失败",
        duration: 1000
      });
    }
  },

  components: {}
};
</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#browseRecord {
  padding: 1.5rem 0.3rem;
  background-color: #fff;

  .record-list {
    overflow: visible;
    color: #252525;

    .record-item {
      color: #252525 !important;
      text-align: left;
      padding-bottom: 2rem;

      ::v-deep .van-step__title {
        color: #252525;
        // margin-top: -20px;
        // transform: translateY(-18px);
      }
    }

    .record-item:nth-of-type(2) {
      ::v-deep .van-step__title {
        color: #252525;
        margin-top: 0;
      }
    }
  }

  .browse-page {
    position: relative;
    width: 20.344rem;
    min-height: 5.563rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem 0.8rem 0.5rem 1.8rem;
    font-size: 12px;
    white-space: nowrap;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../../../assets/images/enterprise_wechat/step_bg.png");

    .header,
    .bottom {
      display: flex;
      justify-content: space-between;
    }

    .header{
      align-items: center;
    }
    .page-name {
      display: flex;
      align-items: center;
      flex: 1;
      font-size: 14px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      img {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        margin: 0 0.75rem 0 0 ;
      }

      .time {
        font-size: 12px;
        font-weight: 400;
        color: #989898;
      }
    }

    .type {
      color: #fff;
      border-radius: 0.125rem;
      background-color: #f78b00;
    }

    .copy {
      font-weight: bold;
      color: #f78b00;
    }
  }

  .load-more {
    color: #5f5a5a;
    padding: 0.3rem;
    border-radius: 0.2rem;
    margin-left: 1.3rem;
    background: #f4f4f4;
    text-align: center;
  }
}

.contenbox {
  flex: 1;
  text-align: left;
  overflow: hidden;
  display: flex;
  margin: 0.325rem 0;

  .cRight {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .ctitle {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .cprice {
      color: #f84949;
      font-size: 0.75rem;
      text-decoration: none;
    }
  }

  .cimg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.25rem;
    margin-right: 0.325rem;

    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.25rem;
    }
  }
}
</style>